<template>
	<div class="cljk-bottom">
		<el-tabs v-model="activeName" @tab-click="handleClick" size="mini">
			<el-tab-pane label="车辆监控" name="first">
				<cljk-table :bottomHeight.sync="bottomHeight" :sourceTableData.sync="cljkData" />
			</el-tab-pane>
			<el-tab-pane label="北斗报警" name="second" lazy>
				<beidoubj-table :bottomHeight.sync="bottomHeight" />
			</el-tab-pane>
			<el-tab-pane label="主动安全报警" name="third" lazy>
				<zdaq-table :bottomHeight.sync="bottomHeight"/>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import cljkTable from '../bottom/cljk-table.vue'
	import beidouBJTable from '../bottom/beidoubj-table.vue'
	import zdaqTable from '../bottom/zdaq-table.vue'
	export default {
		components: {
			'cljk-table': cljkTable,
			'beidoubj-table':beidouBJTable,
			'zdaq-table':zdaqTable
		},
		props: {
			nodes: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			},
			bottomHeight: {
				type: String,
				default: function() {
					return 22+'vh';
				},
				required: true
			},
			cljkData: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			},
		},
		watch: {
			nodes: function(val) {
				
			}
		},
		name: 'bottomContent',

		data() {

			return {
				activeName: 'first'
			}

		},

		mounted() {
			
		}



	}
</script>

<style lang="scss">
	.cljk-bottom {
		.el-tabs__header {
			margin: 0;
		}
	}
</style>